<template>
  <view class="my-userinfo-component">
    <view class="avatar-nickname">
      <image class="avatar" :src="userInfo.avatarUrl"></image>
      <text class="nickname">{{ userInfo.nickName }}</text>
    </view>
    <view class="panels">
      <view class="panel-1">
        <view class="panel-1-item">
          <text>8</text>
          <text>收藏的店铺</text>
        </view>
        <view class="panel-1-item">
          <text>14</text>
          <text>收藏的商品</text>
        </view>
        <view class="panel-1-item">
          <text>18</text>
          <text>关注的商品</text>
        </view>
        <view class="panel-1-item">
          <text>84</text>
          <text>足迹</text>
        </view>
      </view>
      <view class="panel-2">
        <view class="panel-2-title">
          我的订单
        </view>
        <view class="panel-2-content">
          <view class="panel-2-item">
            <image src="../../static/my-icons/icon1.png"></image>
            <text>待付款</text>
          </view>
          <view class="panel-2-item">
            <image src="../../static/my-icons/icon2.png"></image>
            <text>待收货</text>
          </view>
          <view class="panel-2-item">
            <image src="../../static/my-icons/icon3.png"></image>
            <text>退款/退货</text>
          </view>
          <view class="panel-2-item">
            <image src="../../static/my-icons/icon4.png"></image>
            <text>全部订单</text>
          </view>
        </view>
      </view>
      <view class="panel-3">
        <view class="panel-3-item">
          <text>收货地址</text>
          <uni-icons type="right" size="18"></uni-icons>
        </view>
        <view class="panel-3-item">
          <text>联系客服</text>
          <uni-icons type="right" size="18"></uni-icons>
        </view>
        <view class="panel-3-item" @click="$refs.popup.open()">
          <text>退出登录</text>
          <uni-icons type="right" size="18"></uni-icons>
        </view>
      </view>
    </view>
    <uni-popup type="dialog" ref="popup">
      <uni-popup-dialog title="提示" content="确认退出登录吗？" type="info" @confirm="logout"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  export default {
    name:"MyUserInfo",
    data() {
      return {
        
      };
    },
    computed: {
      ...mapState('user', ['userInfo'])
    },
    methods: {
      ...mapActions('user', ['logout'])
    }
  }
</script>

<style lang="scss" scoped>
.my-userinfo-component {
  .avatar-nickname {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 25rpx;
    height: 350rpx;
    background-color: #c00000;
    .avatar {
      margin-bottom: 30rpx;
      width: 200rpx;
      height: 200rpx;
      border: 6rpx solid white;
      border-radius: 100%;
      box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }
    .nickname {
      color: white;
    }
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      z-index: 0;
      transform: translateY(50%);
      width: 750rpx;
      height: 50rpx;
      background-color: #c00000;
    }
  }
  .panels {
    display: flex;
    flex-direction: column;
    align-items: center;
    .panel-1 {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 20rpx;
      width: 95%;
      height: 120rpx;
      background-color: white;
      border-radius: 6rpx;
      font-size: 28rpx;
      z-index: 999;
      .panel-1-item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
    .panel-2 {
      display: flex;
      flex-direction: column;
      margin-bottom: 20rpx;
      width: 95%;
      height: 250rpx;
      background-color: white;
      border-radius: 6rpx;
      font-size: 28rpx;
      .panel-2-title {
        padding: 20rpx 0 20rpx 20rpx;
        border-bottom: 1px solid #f3f3f3;
      }
      .panel-2-content {
        display: flex;
        flex: 1;
        justify-content: space-around;
        align-items: center;
        .panel-2-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          image {
            margin-bottom: 10rpx;
            width: 80rpx;
            height: 80rpx;
          }
        }
      }
    }
    .panel-3 {
      display: flex;
      flex-direction: column;
      height: 280rpx;
      width: 95%;
      background-color: white;
      border-radius: 6rpx;
      .panel-3-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;
        flex: 1;
      }
    }
  }
}
</style>